<template>
	<div>
		<el-row>
			<el-col :span="8" :style="{ height: '400px' }">
				<ECharts ref="chart" :option="option" />
			</el-col>
			<el-col :span="8" :style="{ height: '400px' }">
				<ECharts ref="chart1" :option="option1" />
			</el-col>
			<el-col :span="8" :style="{ height: '400px' }">
				<ECharts ref="chart2" :option="option2" />
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="8" :style="{ height: '400px' }">
				<ECharts :option="option" />
			</el-col>
			<el-col :span="8" :style="{ height: '400px' }">
				<ECharts :option="option" />
			</el-col>
			<el-col :span="8" :style="{ height: '400px' }">
				<ECharts :option="option" />
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import axios from 'axios'
import { useRouter } from "vue-router";

const option = ref()
const option1 = ref()
const option2 = ref()
const chart = ref()
const chart1 = ref()
const chart2 = ref()

const router = useRouter()
const fetchStateData = async () => {
	const resp = await axios.get('/api/echarts/state');
	const { state, data } = resp.data.data
	option.value = {
		title: {
			text: 'ECharts 入门示例'
		},
		tooltip: {},
		xAxis: {
			data: state
		},
		yAxis: {},
		series: [
			{
				name: '销量',
				type: 'bar',
				data: data
			}
		]
	}
	option1.value = {
		xAxis: {
			type: 'category',
			data: state
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: data,
				type: 'line'
			}
		]
	};
	option2.value = {
		tooltip: {
			trigger: 'item'
		},
		legend: {
			top: '5%',
			left: 'center'
		},
		series: [
			{
				name: 'Access From',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '40',
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: state.map((v: string, i: number) => {
					return {
						value: data[i],
						name: v
					}
				})
			}
		]
	}
}

onMounted(() => {
	fetchStateData()

	chart.value.inst.on('click', (params: any) => {
		router.push('/list/manage?state=' + params.name)
	})


	chart1.value.inst.on('click', (params: any) => {
		router.push('/list/manage?state=' + params.name)
	})

	chart2.value.inst.on('click', (params: any) => {
		router.push('/list/manage?state=' + params.name)
	})

})
</script>

<style scoped>
.box {
	width: 500px;
	height: 500px;
}
</style>